import { nextTick } from 'vue'
export default {
  // mounted(el) {
  //   nextTick(() => {
  //     const dragDom = el?.parentElement?.parentElement
  //     if (el && dragDom) {
  //       el.style.cssText += ';cursor:move;'
  //       // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  //       const getStyle = (function () {
  //         if (window.document?.currentStyle) {
  //           return (dom, attr) => dom.currentStyle[attr]
  //         } else {
  //           return (dom, attr) => getComputedStyle(dom, null)[attr]
  //         }
  //       })()
  //       document.onselectstart = function () {
  //         return false
  //       }
  //       el.onmousedown = (e) => {
  //         // 鼠标按下，计算当前元素距离可视区的距离
  //         const disX = e.clientX - el.offsetLeft
  //         const disY = e.clientY - el.offsetTop
  //         const dragDomWidth = dragDom.offsetWidth
  //         const dragDomHeight = dragDom.offsetHeight
  //         const screenWidth = document.body.clientWidth
  //         const screenHeight = document.body.clientHeight
  //         const minDragDomLeft = dragDom.offsetLeft
  //         const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
  //         const minDragDomTop = dragDom.offsetTop
  //         const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
  //         // 获取到的值带px 正则匹配替换
  //         let styL = getStyle(dragDom, 'left')
  //         let styT = getStyle(dragDom, 'top')
  //         if (styL.includes('%')) {
  //           styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
  //           styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
  //         } else {
  //           styL = +styL.replace(/\px/g, '')
  //           styT = +styT.replace(/\px/g, '')
  //         }
  //         document.onmousemove = function (e) {
  //           // 通过事件委托，计算移动的距离
  //           let left = e.clientX - disX
  //           let top = e.clientY - disY
  //           // 边界处理
  //           if (-left > minDragDomLeft) {
  //             left = -minDragDomLeft
  //           } else if (left > maxDragDomLeft) {
  //             left = maxDragDomLeft
  //           }
  //           if (-top > minDragDomTop) {
  //             top = -minDragDomTop
  //           } else if (top > maxDragDomTop) {
  //             top = maxDragDomTop
  //           }
  //           // 移动当前元素
  //           dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
  //         }
  //         document.onmouseup = function (e) {
  //           document.onmousemove = null
  //           document.onmouseup = null
  //         }
  //       }
  //     }
  //   })
  // }
  mounted(el, binding) {
    nextTick(() => {
      el.style.cursor = 'move'
      const addV = (v1, v2) => {
        const x = v1[0] + v2[0]
        const y = v1[1] + v2[1]
        return [x, y]
      }
      const minusV = (v1, v2) => {
        const x = v2[0] - v1[0]
        const y = v2[1] - v1[1]
        return [x, y]
      }
      const formatV = (v, range) => {
        let x = v[0]
        let y = v[1]
        x = Math.max(x, range[2])
        x = Math.min(x, range[3])
        y = Math.max(y, range[0])
        y = Math.min(y, range[1])
        return [x, y]
      }
      const setTranslatePosition = (transform, v) => {
        return `translate(${v[0]}px, ${v[1]}px)`
      }
      const getPosition = (e) => {
        if (e instanceof MouseEvent) {
          return [e.pageX, e.pageY]
        }
        const touch = e.touches[0]
        return [touch.pageX, touch.pageY]
      }
      const enableDrag = (element) => {
        let { outerElement, innerElement } = {}
        let startTransform = window.getComputedStyle(element).transform
        let startPosition = null
        let endPosition = null
        let draggingMoveVectorRange = null
        let draggedMoveVector = [0, 0]
        let draggingMoveVector = [0, 0]
        outerElement = document.body
        innerElement = element
        const onMouseDown = (e) => {
          e.stopPropagation()
          startPosition = getPosition(e)
          if (outerElement && element) {
            const outerElementRect = outerElement.getBoundingClientRect()
            const elementRect = element.getBoundingClientRect()
            draggingMoveVectorRange = [
              outerElementRect.top - elementRect.top,
              outerElementRect.bottom - elementRect.bottom,
              outerElementRect.left - elementRect.left,
              outerElementRect.right - elementRect.right
            ]
          }
        }
        const onMouseMove = (e) => {
          if (startPosition && draggingMoveVectorRange) {
            endPosition = getPosition(e)
            const currentMoveVector = formatV(
              minusV(startPosition, endPosition),
              draggingMoveVectorRange
            )
            draggingMoveVector = addV(draggedMoveVector, currentMoveVector)
            element.style.transform = setTranslatePosition(startTransform, draggingMoveVector)
          }
        }
        const onMouseUp = (e) => {
          if (startPosition && draggingMoveVectorRange) {
            draggedMoveVector = draggingMoveVector
          }
          startPosition = null
        }
        const addEventListener = () => {
          if (innerElement) {
            innerElement.addEventListener('mousedown', onMouseDown)
            document.addEventListener('mousemove', onMouseMove)
            document.addEventListener('mouseup', onMouseUp)
          }
        }
        const removeEventListener = () => {
          if (innerElement) {
            innerElement.removeEventListener('mousedown', onMouseDown)
            document.removeEventListener('mousemove', onMouseMove)
            document.removeEventListener('mouseup', onMouseUp)
          }
        }
        addEventListener()
        return removeEventListener
      }
      enableDrag(el.parentElement?.parentElement)
    })
  }
  // mounted(el) {
  //   el.style.cursor = 'move'
  //   let elMove = el?.parentElement
  //   el.onmousedown = function (e) {
  //     var disx = e.pageX - elMove.offsetLeft
  //     var disy = e.pageY - elMove.offsetTop

  //     if (e.preventDefault) {
  //       e.preventDefault()
  //     } else {
  //       e.returnValue = false // 解决快速频繁拖动滞后问题
  //     }

  //     document.onmousemove = function (e) {
  //       // 鼠标位置-鼠标相对元素位置=元素位置
  //       let left = e.clientX - disx
  //       let top = e.clientY - disy
  //       // 限制拖拽范围不超出可视区
  //       if (left <= 0) {
  //         left = 5 // 设置成5,离边缘不要太近
  //       } else if (left > document.documentElement.clientWidth - elMove.clientWidth) {
  //         // document.documentElement.clientWidth屏幕可视区宽度
  //         left = document.documentElement.clientWidth - elMove.clientWidth - 5
  //       }

  //       if (top <= 0) {
  //         top = 5
  //       } else if (top > document.documentElement.clientHeight - elMove.clientHeight) {
  //         top = document.documentElement.clientHeight - elMove.clientHeight - 5
  //       }
  //       elMove.style.left = left + 'px'
  //       elMove.style.top = top + 'px'
  //     }

  //     document.onmouseup = function () {
  //       document.onmousemove = document.onmouseup = null
  //     }
  //   }
  // }
}
